<script lang="ts" setup>
  import type { CourseCup, CourseItem } from '@/types/course';
  import { ref } from 'vue';
  import HoleInfo from './hole-info.vue';
  import CourseCupEditor from '../components/course-cup-editor.vue';

  defineProps<{
    courseDetail: CourseItem;
    courseCups: CourseCup[];
    showSync: boolean;
  }>();

  const emit = defineEmits(['update']);

  const editorConfig = ref<{
    visible: boolean;
    record?: CourseCup;
  }>({
    visible: false,
  });

  const handleEditorDone = (refresh: boolean) => {
    editorConfig.value = {
      visible: false,
    };
    if (refresh) {
      emit('update');
    }
  };
</script>

<template>
  <a-tabs v-if="courseCups.length > 0" type="card">
    <a-tab-pane
      v-for="(cup, index) in courseCups"
      :key="index"
      :title="cup.name"
    >
      <div class="cup">
        <div class="cup-basic">
          <div>
            <a-space :size="30">
              <div>洞数: {{ cup.holeCount }}</div>
              <div>杆数: {{ cup.parCount }}</div>
              <div>长度: {{ cup.fieldLength }}</div>
              <div>
                <a-link @click="editorConfig = { visible: true, record: cup }"
                  >修改</a-link
                >
              </div>
            </a-space>
          </div>
          <div>设计师: {{ cup.fieldDesigner || '-' }}</div>
          <div v-if="cup.fieldStyles">
            风格:
            <a-tag
              v-for="(style, styleIndex) in cup.fieldStyles"
              :key="styleIndex"
            >
              {{ style }}
            </a-tag>
          </div>
        </div>
        <div>
          <HoleInfo
            :show-sync="showSync"
            :course-id="cup.courseId as string"
            :cup-id="cup.id as string"
            :cup-office-id="cup.officeId"
            :course-office-id="courseDetail.officeId"
          />
        </div>
        <div v-if="cup.fairwayList" class="cup-fairway">
          <div class="cup-fairway-title">球道信息</div>
          <a-row class="cup-fairway-grid" :gutter="[10, 10]">
            <a-col
              v-for="(fairway, fairwayIndex) in cup.fairwayList"
              :key="fairwayIndex"
              :span="6"
            >
              <div class="cup-fairway-item">
                <div class="cup-fairway-pic">
                  <img :src="fairway.pic" alt="pic" />
                </div>
                <div class="cup-fairway-hole"> 球洞：{{ fairway.hole }} </div>
                <div class="cup-fairway-desc">
                  {{ fairway.description }}
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </a-tab-pane>

    <template #extra>
      <a-link
        v-if="courseDetail.onlyForData === 1"
        @click="editorConfig = { visible: true }"
      >
        添加场地
      </a-link>
    </template>
  </a-tabs>

  <a-button
    v-else-if="courseDetail.onlyForData === 1"
    @click="editorConfig = { visible: true }"
  >
    添加场地
  </a-button>

  <CourseCupEditor
    v-if="editorConfig.visible"
    :course-detail="courseDetail"
    :course-cup="editorConfig.record"
    @close="handleEditorDone"
  />
</template>

<style lang="less" scoped>
  .cup {
    padding: 0 12px 12px;
  }

  .cup-basic {
    & > div {
      margin-bottom: 12px;
      &:deep(.arco-tag) {
        margin-right: 10px;
      }
    }
  }

  .cup-fairway {
    margin-top: 20px;
    &-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 12px;
    }
    &-pic {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--color-border-2);
      border-bottom: none;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
    &-hole {
      padding: 5px 10px;
      border: 1px solid var(--color-border-2);
      border-top: none;
      text-align: center;
    }
    &-desc {
      padding: 5px 10px;
      font-size: 12px;
      border: 1px solid var(--color-border-2);
      border-top: none;
      color: var(--color-text-2);
    }
  }
</style>
